<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { Page } from '@vben/common-ui';
import { ContentWrap } from '#/components/content-wrap';
import { Card, Row, Col, Table, Tag } from 'ant-design-vue';
import { getDashboardStatistics, getBookingTrend, getTodoList, getRecentOrders } from '#/api/wedding';
import type { DashboardStatistics, TodoItem } from '#/api/wedding';
// 不使用图标，使用文字或 Ant Design 图标
import dayjs from 'dayjs';

const statistics = ref<DashboardStatistics>({
  monthlyBookings: 0,
  dressUtilization: 0,
  monthlyRevenue: 0,
  customerSatisfaction: 0,
  totalDresses: 0,
  totalArtists: 0,
  totalPhotographers: 0,
  totalOrders: 0,
});

const todoList = ref<TodoItem[]>([]);
const recentOrders = ref<any[]>([]);
const loading = ref(false);

const orderColumns = [
  { title: '订单号', dataIndex: 'orderId', key: 'orderId', width: 180 },
  { title: '客户姓名', dataIndex: 'customerName', key: 'customerName' },
  { title: '婚期', dataIndex: 'weddingDate', key: 'weddingDate', width: 120 },
  { title: '总金额', dataIndex: 'totalAmount', key: 'totalAmount', width: 120 },
  { title: '状态', key: 'status', width: 100, slots: { customRender: 'status' } },
];

const loadData = async () => {
  loading.value = true;
  try {
    statistics.value = await getDashboardStatistics();
    const todos = await getTodoList({ pageNo: 1, pageSize: 5 });
    todoList.value = todos.list;
    recentOrders.value = await getRecentOrders(5);
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  loadData();
});
</script>

<template>
  <Page auto-content-height>
    <div class="p-4">
      <!-- 统计卡片 -->
      <Row :gutter="16" class="mb-4">
        <Col :span="6">
          <Card>
            <div class="flex items-center justify-between">
              <div>
                <div class="text-gray-500 text-sm">本月预约</div>
                <div class="text-2xl font-bold mt-2">{{ statistics.monthlyBookings }}</div>
              </div>
              <div class="text-blue-500 text-4xl flex items-center justify-center">
                <span class="text-5xl">👥</span>
              </div>
            </div>
          </Card>
        </Col>
        <Col :span="6">
          <Card>
            <div class="flex items-center justify-between">
              <div>
                <div class="text-gray-500 text-sm">婚纱利用率</div>
                <div class="text-2xl font-bold mt-2">{{ statistics.dressUtilization }}%</div>
              </div>
              <div class="text-green-500 text-4xl flex items-center justify-center">
                <span class="text-5xl">📦</span>
              </div>
            </div>
          </Card>
        </Col>
        <Col :span="6">
          <Card>
            <div class="flex items-center justify-between">
              <div>
                <div class="text-gray-500 text-sm">本月营收</div>
                <div class="text-2xl font-bold mt-2">¥{{ statistics.monthlyRevenue }}</div>
              </div>
              <div class="text-orange-500 text-4xl flex items-center justify-center">
                <span class="text-5xl">💰</span>
              </div>
            </div>
          </Card>
        </Col>
        <Col :span="6">
          <Card>
            <div class="flex items-center justify-between">
              <div>
                <div class="text-gray-500 text-sm">客户满意度</div>
                <div class="text-2xl font-bold mt-2">{{ statistics.customerSatisfaction }}</div>
              </div>
              <div class="text-red-500 text-4xl flex items-center justify-center">
                <span class="text-5xl">⭐</span>
              </div>
            </div>
          </Card>
        </Col>
      </Row>

      <Row :gutter="16">
        <!-- 待办事项 -->
        <Col :span="12">
          <ContentWrap title="待办事项">
            <div class="space-y-3">
              <div 
                v-for="todo in todoList" 
                :key="todo.id"
                class="p-3 border rounded hover:bg-gray-50 cursor-pointer"
              >
                <div class="flex justify-between items-start">
                  <div class="flex-1">
                    <div class="font-medium">{{ todo.title }}</div>
                    <div class="text-sm text-gray-500 mt-1">{{ todo.description }}</div>
                  </div>
                  <Tag :color="todo.priority === 'high' ? 'red' : todo.priority === 'medium' ? 'orange' : 'default'">
                    {{ todo.priority }}
                  </Tag>
                </div>
                <div class="text-xs text-gray-400 mt-2">
                  {{ dayjs(todo.createTime).format('YYYY-MM-DD HH:mm') }}
                </div>
              </div>
              <div v-if="todoList.length === 0" class="text-center text-gray-400 py-8">
                暂无待办事项
              </div>
            </div>
          </ContentWrap>
        </Col>

        <!-- 最近订单 -->
        <Col :span="12">
          <ContentWrap title="最近订单">
            <Table
              :dataSource="recentOrders"
              :columns="orderColumns"
              :pagination="false"
              size="small"
            >
              <template #status="{ record }">
                <Tag>{{ record.status }}</Tag>
              </template>
            </Table>
          </ContentWrap>
        </Col>
      </Row>
    </div>
  </Page>
</template>

